<template>
  <div class="box1">
     <h4>基础用法</h4>
     <div class="notice">
     <qr-button @click="open">可自动关闭</qr-button>
     <qr-button @click="open1">不自动关闭</qr-button>
     </div>
     <div class="show">
      <span @click='ShowMsg'>{{msg}}</span>
        <div class="markdown-body" v-show="isShow" >
        <notice-md></notice-md>
       </div>
     </div>
  </div>
</template>

<script>
import noticeMd from '@/markdown/Notice/notice.md'
export default {
  name: 'Notice',
  data() {
    return{
      isShow: true,
      msg: '隐藏代码'
    }
  },
  components: {
      noticeMd
  },
  methods: {
    open() {
      this.$notice({
         title: '标题',
         message: '我是一条会消失的消息框',
         time: 2000
      })
    },
    open1() {
      this.$notice({
         title: '标题',
         message: '我是一条不会消失的消息框',
      })
    },
     ShowMsg() {
     this.isShow = !this.isShow;
     this.isShow == true ? this.msg = '隐藏代码' : this.msg = '显示代码'
   }
  } 
}
</script>

<style  scoped>
  .notice {
     margin-top: 15px;
  }
  .qr-button {
    margin-left: 10px;
  }
  span {
     font-size: 14px;
     display: block;
     height: 50px;
     color:  #409eff ;
     margin-left: 300px;
     opacity: .7;
   }
   span:hover {
     color:  #409eff ;
     opacity: 1;
     cursor: pointer;
   }
   .markdown-body {
     font-size: 17px;
   }
   .box1 {
     width: 1000px;
     margin-top: 20px;
     border: 1px #ccc solid;
     border-radius: 5px;
     padding: 10px 20px;
     box-shadow: 7px 7px 7px -3px rgba(0, 0,0, .2);
   }
</style>
